<!--
 * @Author: liaoyu1992 1519778181@qq.com
 * @Date: 2022-11-05 00:18:01
 * @LastEditors: liaoyu1992 1519778181@qq.com
 * @LastEditTime: 2022-11-11 22:02:58
 * @FilePath: \kgantt\core\components\other\Tooltip.vue
 * @Description: 
-->
<template>
  <div
    ref="tooltipRef"
    :class="
      relatedX ? 'kgantt-tooltipDetailsContainer' : 'kgantt-tooltipDetailsContainerHidden'
    "
    :style="'left: ' + relatedX + 'px;top:' + relatedY + 'px'"
  >
    <component
      v-if="tooltipContent"
      :is="tooltipContent"
      :task="task"
      :font-size="fontSize"
      :font-family="fontFamily"
    ></component>
    <StandardTooltipContent
      v-else
      :task="task"
      :font-size="fontSize"
      :font-family="fontFamily"
    ></StandardTooltipContent>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, nextTick } from "vue";
import StandardTooltipContent from "./StandardTooltipContent.vue";
const props = defineProps({
  task: {
    type: Object,
    default: {},
  },
  arrowIndent: {
    type: Number,
    default: 0,
  },
  rtl: {
    type: Boolean,
    default: false,
  },
  svgContainerHeight: {
    type: Number,
    default: 0,
  },
  svgContainerWidth: {
    type: Number,
    default: 0,
  },
  svgWidth: {
    type: Number,
    default: 0,
  },
  headerHeight: {
    type: Number,
    default: 0,
  },
  taskListWidth: {
    type: Number,
    default: 0,
  },
  scrollX: {
    type: Number,
    default: 0,
  },
  scrollY: {
    type: Number,
    default: 0,
  },
  rowHeight: {
    type: Number,
    default: 0,
  },
  fontSize: {
    type: String,
    default: "",
  },
  fontFamily: {
    type: String,
    default: "",
  },
  tooltipContent: {
    type: String,
    default: "",
  },
});
const tooltipRef = ref();
const relatedY = ref(0);
const relatedX = ref(0);
const initView = () => {
  if (tooltipRef.value) {
    const tooltipHeight = tooltipRef.value.offsetHeight * 1.1;
    const tooltipWidth = tooltipRef.value.offsetWidth * 1.1;

    let newRelatedY =
      props.task.index * props.rowHeight - scrollY + props.headerHeight;
    let newRelatedX: number;
    if (props.rtl) {
      newRelatedX =
        props.task.x1 - props.arrowIndent * 1.5 - tooltipWidth - props.scrollX;
      if (newRelatedX < 0) {
        newRelatedX = props.task.x2 + props.arrowIndent * 1.5 - props.scrollX;
      }
      const tooltipLeftmostPoint = tooltipWidth + newRelatedX;
      if (tooltipLeftmostPoint > props.svgContainerWidth) {
        newRelatedX = props.svgContainerWidth - tooltipWidth;
        newRelatedY += props.rowHeight;
      }
    } else {
      newRelatedX =
        props.task.x2 + props.arrowIndent * 1.5 + props.taskListWidth - scrollX;
      const tooltipLeftmostPoint = tooltipWidth + newRelatedX;
      const fullChartWidth = props.taskListWidth + props.svgContainerWidth;
      if (tooltipLeftmostPoint > fullChartWidth) {
        newRelatedX =
          props.task.x1 +
          props.taskListWidth -
          props.arrowIndent * 1.5 -
          props.scrollX -
          tooltipWidth;
      }
      if (newRelatedX < props.taskListWidth) {
        newRelatedX =
          props.svgContainerWidth + props.taskListWidth - tooltipWidth;
        newRelatedY += props.rowHeight;
      }
    }

    const tooltipLowerPoint = tooltipHeight + newRelatedY - props.scrollY;
    if (tooltipLowerPoint > props.svgContainerHeight - scrollY) {
      newRelatedY = props.svgContainerHeight - tooltipHeight;
    }
    relatedY.value = newRelatedY;
    relatedX.value = newRelatedX;
  }
};
onMounted(() => {
  nextTick(() => {
    initView();
  });
});
</script>